<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="referrer" content="no-referrer">
    <script src="../js/jquery-3.4.1.min.js"></script>
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../css/style.css">
    <script src="../js/vue.min.js"></script>
    <script src="../js/axios.min.js"></script>
    <script src="../js/index.js"></script>
    <style>
        li {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        ul {
            padding-left: 10px;
        }
        .el-divider--horizontal {
            margin-top: 12px;
        }
        #right {
            word-wrap: break-word;
            word-break: normal;
        }
    </style>
<body>

<div id="play" style="padding: 8px;">
    <a href="http://localhost:8080/user/index.html"><img src="../img/logo.png" width="160" height="50"></a>
</div>
<el-row id="main" style="margin: 0 100px 0">
    <el-col :span="16" id="left">
        <div id="vd"></div>
        <audio id="player" autoplay="autoplay"></audio>
        <h4>评论</h4>
        <el-divider></el-divider>
        <div id="comment">
            <ul>
                <li v-for="c in list">
                    <div>
                        <span style="color: #fb7299">{{c.name}}</span>
                        <br>
                        <span style="font-size: 16px">{{c.content}}</span>
                        <br>
                        <el-divider content-position="left">{{c.date}}</el-divider>
                    </div>
                </li>
            </ul>
            <el-pagination
                    background
                    @current-change="handleCurrentChange"
                    :current-page.sync="currentPage"
                    :page-size="10"
                    layout="prev, pager, next"
                    :total="totalPage">
            </el-pagination>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
                <el-form-item prop="content">
                    <el-input type="textarea" v-model="ruleForm.content" style="float: left;width: 90%;"></el-input>
                    <el-button type="primary" @click="submitForm('ruleForm')" style="height: 55px;float: left">发送</el-button>
                </el-form-item>
            </el-form>
        </div>
    </el-col>
    <el-col :span="8" id="right">
        <h4 style="margin: 0 0 0 10px;">视频推荐</h4>
        <ul>
            <li v-for="v in list2" @click="detail(v)">
                <div style="display: inline-block">
                    <div style="float: left;margin-right: 5px;">
                        <img :src="v.imgUrl" width="141" height="80">
                    </div>
                    <div style="float: left">
                        <div style="font-size: 14px;margin-bottom: 14px">{{v.name}}</div>
                        <div style="font-size: 10px;margin-bottom: 14px;color: #999">{{v.author}}</div>
                        <div style="font-size: 10px;;color: #999">{{v.views}}播放 {{v.time}}</div>
                    </div>
                </div>
            </li>
        </ul>
    </el-col>
</el-row>
<script>
    let av = getPar('av') === '' ? 255321364 : getPar('av');

    function callbackfunction(j) {
        let u = j.durl[0].url;
        $("#vd").html('<video width=100% height=100% src="' + u + '" preload="auto" autoplay="" controls="" class="embed-responsive-item"></video>')
        $("#page1").attr("href", j.durl[0].url);
    }

    function parseVideo(page) {
        $.getScript("http://api.bilibili.com/playurl?callback=callbackfunction&aid=" + av + "&page=" + page + "&platform=html5&quality=3&vtype=mp4&type=jsonp");
    }

    function getPar(par) {
        //获取当前URL
        var local_url = document.location.href;
        //获取要取得的get参数位置
        var get = local_url.indexOf(par + "=");
        if (get === -1) {
            return false;
        }
        //截取字符串
        var get_par = local_url.slice(par.length + get + 1);
        //判断截取后的字符串是否还有其他get参数
        var nextPar = get_par.indexOf("&");
        if (nextPar !== -1) {
            get_par = get_par.slice(0, nextPar);
        }
        return get_par;
    }

    parseVideo(1);
    new Vue({
        el: '#main',
        data() {
            return {
                currentPage: 1,
                totalPage: 1,
                list: [],
                list2: [],
                ruleForm: {
                    vid: '',
                    content: '',
                },
                rules: {
                    content: [
                        {message: '请填写评论', trigger: 'blur'}
                    ]
                }
            }
        },
        created: function () {
            this.getList();
            this.getList2();
            this.ruleForm.vid = this.getPar('vid');
        },
        methods: {
            getList() {
                let here = this;
                let union = {
                    currentPage: here.currentPage,
                    search: this.getPar('vid')
                };
                console.log(union);
                union = encodeURIComponent(JSON.stringify(union));
                axios({
                    method: 'post',
                    url: '/dao/bbb',
                    data: union
                }).then(function (response) {
                    let json = JSON.parse(decodeURIComponent(response.data));
                    here.list = json.tableData;
                    here.totalPage = json.totalPage;
                });
            },
            getList2() {
                let here = this;
                vid = encodeURIComponent(this.getPar('vid'));
                axios({
                    method: 'post',
                    url: '/dao/ddd',
                    data: vid
                }).then(function (response) {
                    here.list2 = JSON.parse(decodeURIComponent(response.data));
                });
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        let here = this;
                        form = encodeURIComponent(JSON.stringify(here.ruleForm));
                        axios({
                            method: 'post',
                            url: '/dao/update/ccc',
                            data: form
                        }).then(function (response) {
                            let data = JSON.parse(decodeURIComponent(response.data));
                            if (data.success === "1") {
                                here.$message({
                                    type: 'success',
                                    message: '发送成功'
                                });
                                here.getList();
                                here.ruleForm.content = '';
                            } else {
                                here.$message.error("发送失败");
                            }
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            handleCurrentChange(val) {
                this.getList();
            },
            getPar(par) {
                //获取当前URL
                var local_url = document.location.href;
                //获取要取得的get参数位置
                var get = local_url.indexOf(par + "=");
                if (get === -1) {
                    return false;
                }
                //截取字符串
                var get_par = local_url.slice(par.length + get + 1);
                //判断截取后的字符串是否还有其他get参数
                var nextPar = get_par.indexOf("&");
                if (nextPar !== -1) {
                    get_par = get_par.slice(0, nextPar);
                }
                return get_par;
            },
            detail(video) {
                window.location.href='http://localhost:8080/user/player.html?vid=' + video.vid + '&av=' + video.av;
            }
        }
    });
</script>
</body>
</html>
